<template>
	<view>
		<!-- 轮播图组件 -->
		<view class="bg-white"
			:style="{ paddingTop: `${newData.paddingTop }rpx`, paddingBottom: `${newData.paddingBottom }rpx`,
        paddingLeft: `${newData.paddingLR }rpx`, paddingRight: `${newData.paddingLR }rpx`,
		backgroundColor: newData.background ? newData.background.indexOf('bg-') !== -1 ? '' : newData.background : newData.background }"
			:class="newData.background ? newData.background.indexOf('bg-') !== -1 ? newData.background : '' : 'bg-' + thememobile.backgroundColor">
			<swiper :class="newData.dotStyle=='square-dot' ? 'square-dot' : 'round-dot'" :indicator-dots="true"
				:circular="true" :autoplay="true" :interval="newData.interval" duration="500" @change="cardSwiper"
				indicator-color="#cccccc" indicator-active-color="#ffffff" :style="{height: `${newData.height}rpx`}">
				<swiper-item v-for="(item,index) in newData.swiperList" :key="index" :class="cardCur==index?'cur':''"
					@click="jumpPage(item.pageUrl)">
					<image :src="item.imageUrl" style="width: 100%;"
						:style="{height: `${newData.height}rpx`, borderRadius: `${newData.borderRadius}px`}">
					</image>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	import {
		pageUrls
	} from '../div-base/div-page-urls.js'

	export default {
		props: {
			value: {
				type: Object,
				default: () => {
					return {
						height: 100,
						paddingTop: 0,
						paddingBottom: 0,
						paddingLR: 0,
						dotStyle: 'square-dot',
						background: 'red',
						borderRadius: 0,
						interval: 3000,
						swiperList: []
					}
				}
			}
		},
		data() {
			return {
				theme: app.globalData.theme, //全局颜色变量
				newData: this.value,
				cardCur: 0,
				pageUrls: pageUrls
			};
		},
		methods: {
			cardSwiper(e) {
				this.cardCur = e.detail.current
			},
			jumpPage(page) {
				if (page) {
					app.checkLogin().then(res=>{
						if (this.pageUrls.tabPages.indexOf(page) != -1) {
							uni.switchTab({
								url: page
							});
						} else {
							uni.navigateTo({
								url: page
							});
						}
					}).catch(()=>{
						this.$emit('showPop')
					})					
				}
			}
		}
	}
</script>

<style scoped lang="scss">
</style>